<template>
  <div class="home">
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <div class="dtqk" id="main">
        </div>
      </el-col>
      <el-col :span="12" :offset="0">
        <div class="right">
          <el-row :gutter="20">
            <el-col :span="6" :offset="0" v-for="(item, index) in data.routers" :key="index">
              <div class="right-nav" @click="handleClick(item)">
                <div class="right-nav-img">
                  <img :src="item.image" alt="">
                </div>
                <p>{{ item.name }}</p>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12" :offset="0">
              <div class="right-bottom" id="right-bottom-left"></div>
            </el-col>
            <el-col :span="12" :offset="0">
              <div class="right-bottom" id="right-bottom-right"></div>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>

    <el-row :gutter="20">
      <el-col :span="24" :offset="0">
        <div class="body-bottom" id="body-bottom"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
import * as echarts from "echarts"
import { getIndexData } from '@/api/index'
export default {
  name: "Index",
  data() {
    return {
      data: []
    }
  },
  methods: {
    handleClick(item) {
      this.$router.push({ path: item.path })
    },
    initschool() {
      var chartDom = document.getElementById('right-bottom-right');
      var myChart = echarts.init(chartDom);
      const data = this.data.counts[1]
      var option;
      option = {
        title: {
          text: data.name,
          textStyle: {
            color: '#303133',
            fontSize: 18,
          },
          top: 10,
          left: 50,
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: data.name,
            type: 'pie',
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: true, // 显示文本
              position: 'center', // 居中显示
              fontSize: 24, // 数量字体大小
              fontWeight: 'bold', // 加粗
              color: '#303133', // 数量颜色
              // 格式化显示内容为数量（data.count）
              formatter: () => {
                return `${data.count}\n\n学校总数`; // \n 表示换行
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 24,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              // 主要圆环颜色（设置为蓝色）
              {
                value: data.count,
                name: data.name,
                itemStyle: { color: '#396aff' } // 纯色：蓝色
              },
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    initnum() {
      var chartDom = document.getElementById('right-bottom-left');
      var myChart = echarts.init(chartDom);
      const data = this.data.counts[0]
      var option;
      option = {
        title: {
          text: data.name,
          textStyle: {
            color: '#303133',
            fontSize: 18,
          },
          top: 10,
          left: 50,
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            name: data.name,
            type: 'pie',
            radius: ['50%', '60%'],
            avoidLabelOverlap: false,
            label: {
              show: true, // 显示文本
              position: 'center', // 居中显示
              fontSize: 24, // 数量字体大小
              fontWeight: 'bold', // 加粗
              color: '#303133', // 数量颜色
              // 格式化显示内容为数量（data.count）
              formatter: () => {
                return `${data.count}\n\n问卷总数`; // \n 表示换行
              },
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 24,
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: [
              // 主要圆环颜色（设置为蓝色）
              {
                value: data.count,
                name: data.name,
                itemStyle: { color: '#00baad' } // 纯色：蓝色
              },
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
    initdtqk() {
      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;
      // 先获取数据总条数
      const total = this.data.schoolStatistics.length;
      // 计算5条数据所占的百分比（如果数据不足5条，则显示全部）
      const showPercent = total <= 5 ? 100 : (5 / total) * 100;
      option = {
        title: {
          text: '答题情况',
          textStyle: {
            color: '#303133',
            fontSize: 18,
          },
          top: 10,
          left: 50,
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b}: {c} 人'
        },
        // 优化滚动条配置，适配大量数据
        dataZoom: [
          {
            type: 'slider',
            orient: 'horizontal',
            xAxisIndex: 0,
            start: 0,
            end: showPercent, // 固定显示5条数据的范围

            // 核心：强制锁定显示范围大小，不允许任何调整
            minSpan: showPercent,   // 最小显示范围=5条数据
            maxSpan: showPercent,   // 最大显示范围=5条数据
            zoomLock: true,         // 完全禁止缩放操作

            // 禁用鼠标滚轮缩放（防止通过滚轮改变显示数量）
            moveOnMouseWheel: false,
            preventDefaultMouseMove: true,

            // 样式与位置配置
            bottom: 20,
            width: '90%',
            left: '5%',
            height: 16,
            borderColor: 'transparent',
            backgroundColor: '#f0f0f0',
            fillerColor: '#4976ff',
            handleColor: '#fff',
            handleSize: 14,

            // 隐藏不必要的提示
            showDataShadow: false,
            showDetail: false
          }
        ],
        xAxis: {
          type: 'category',
          data: this.data.schoolStatistics.map(item => item.name),
          axisLabel: {
            interval: 0,
            rotate: 0,
            align: 'center',
            fontSize: 10,
            overflow: 'break',
          },
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.data.schoolStatistics.map(item => item.count),
            type: 'bar',
            barWidth: 10,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#4976ff' },
                { offset: 1, color: '#fff' }
              ]),
              borderRadius: [5, 5, 0, 0]
            }
          }
        ]
      };

      option && myChart.setOption(option);

      // 监听窗口大小变化，自适应调整图表
      window.addEventListener('resize', function () {
        myChart.resize();
      });
    },
    inittixing() {
      var chartDom = document.getElementById('body-bottom');
      var myChart = echarts.init(chartDom);
      console.log();

      var option;
      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            lineStyle: {
              type: 'dashed',
              color: '#999',
              width: 1
            }
          },
          backgroundColor: 'rgba(255, 255, 255, 0.9)',
          borderColor: '#4976ff',
          borderWidth: 1,
          textStyle: { color: '#333' },
          formatter: '{b}: {c}' // 
        },
        title: {
          text: '题型分布',
          textStyle: {
            color: '#303133',
            fontSize: 18,
          },
          top: 10,
          left: 50,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.data.classificationStatistics.map(item => item.name)
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: this.data.classificationStatistics.map(item => item.count),
            type: 'line',
            smooth: true,
            symbol: 'none',
            symbolSize: 0,
            areaStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#c7d5ff' },
                { offset: 1, color: '#fff' }
              ])
            },
            lineStyle: {
              color: '#4976ff'
            }
          }
        ]
      };
      option && myChart.setOption(option);
    }
  },
  mounted() {
    getIndexData().then(res => {
      this.data = res.data
      this.initdtqk()
      this.initnum()
      this.initschool()
      this.inittixing()
    })

  }
}
</script>

<style scoped lang="scss">
.home {
  background-color: #f5f8ff;
  width: 100%;
  height: 91vh;
  padding: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}


.dtqk {
  width: 100%;
  height: 45vh;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
}

.right {
  width: 100%;
  height: 45vh;
  display: flex;
  justify-content: space-between;
  flex-direction: column;

  .right-nav {
    width: 100%;
    height: 130px;
    background-color: #fff;
    border-radius: 20px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 3px;
    overflow: hidden;

    &:active {
      opacity: 0.8;
      transform: scale(0.95);
    }

    .right-nav-img {
      text-align: center;

      img {
        width: 48px;
        height: 48px;
        border-radius: 10px;
      }
    }

    p {
      font-size: 24px;
      font-weight: 500;
      text-align: center;
      margin: 0;
    }
  }

  .right-bottom {
    width: 100%;
    height: 280px;
    border-radius: 20px;
    background: #fff;
    overflow: hidden;
  }
}


.body-bottom {
  width: 100%;
  height: 42vh;
  background-color: #fff;
  border-radius: 20px;
  overflow: hidden;
}
</style>
